<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			
		<title>树形菜单和选相卡的整合</title>
		<!-- 导入 jquery 核心类库 -->
	<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
	<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
	<!--
    	引入ztree
    -->
	<script src="../js/ztree/jquery.ztree.all-3.5.js"></script>
	<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />	
	<script>
		$(function(){			
				//开启简单的数据格式
				var setting={
					data:{
						simpleData:{
							enable:true
						}
					},					
			//给节点添加事件 在setting里面
				callback:{          //treeNode对应的就是一条条的json数据
					onClick:function(event,treeId,treeNode,clickFlag){
						var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
						
						//var content="<iframe src="+treeNode.page+"></iframe>"
						//有page属性的选项卡点击步打开
						if(treeNode.page!=undefined&&treeNode.page!=""){
							//如果已经被打开了 在选项卡中存在这个
							if($("#tabs").tabs('exists',treeNode.name)){
								//选中选项卡
								$("#tabs").tabs('select',treeNode.name);
							}else{
								
								$("#tabs").tabs('add',{
									title:treeNode.name,
									content:content,
									closable:true
																
								});
							}
													
						}
											
					}
				}
				};
			
				// 编写树形菜单
				// 简单的json数据
				var zNodes=[
					{id:1,pId:0,name:("父节点一")},
					{id:2,pId:0,name:("父节点二")},
					{id:12,pId:1,name:("子节点一")},
					{id:13,pId:1,name:("收派标准"),url:"./standard.html"},
					{id:14,pId:1,name:("子节点三"),page:"#"},//自定义路径的属性
					{id:21,pId:2,name:("百度"),page:"http://www.baidu.com"},
					{id:22,pId:2,name:("传智"),page:"http://www.itcast.cn"}
				]
						
			//生成树形菜单
			//$.fn.ztree.init($("#baseMenu"),setting,zNodes);
			$.fn.zTree.init($("#baseMenu"), setting, zNodes);
			
			// 设置全局变量 保存当前正在右键的tabs 标题 
				var currentRightTitle  ;
				
				// 为选项卡，添加右键菜单 
				$('#tabs').tabs({
					onContextMenu : function(e,title,index){
						currentRightTitle = title ; 
						$('#mm').menu('show', { 
							left: e.pageX,
							top: e.pageY 
						});
						e.preventDefault(); // 禁用原来的右键效果 
					}
				});
				
				$('#mm').menu({ 
					onClick:function(item){ 
						if(item.name==='Close'){
							$('#tabs').tabs('close',currentRightTitle);
						}else if(item.name === 'CloseOthers'){
							var tabs = $('#tabs').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){
									$('#tabs').tabs('close',$(this).panel('options').title);
								}
							});
						}else if(item.name === 'CloseAll'){
							var tabs = $('#tabs').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心'){
									$('#tabs').tabs('close',$(this).panel('options').title);
								}
							});
						}
					} 
				}); 
		
		
		
		//右下角窗口
		$.messager.show({
			title:'欢迎登录',
			msg:'欢迎管理员登录',
			timeout:3000
			
		});
		
				
		});
		
		
	</script>
	
	
<body class="easyui-layout"> 

<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
	<a href="#" class="easyui-menubutton" data-options="menu:'#cad'">系统菜单</a>
	
	
	
	
</div> 

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">下部</div> 

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">
	西部
	
</div> 

<div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
	<!--折叠面板 -->	
	<div id="mytabs" class="easyui-accordion" style="width:300px;height:200px;" data-options="fit:true" > 
 
		<div data-options="title:'基础数据'" >
		<ul id="baseMenu" class="ztree" ></ul>
		</div>
		
		<div data-options="title:'系统数据'">面板二</div>
		
		
	</div>
	
	
	
</div> 

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
	<!--
    	添加选项卡
    -->
	<div id="tabs" class="easyui-tabs" data-options="fit:true">
		<div data-options="title:'百度',closable:true"> 选项卡一 </div>
		<div data-options="title:'谷歌',closable:true"> 选项卡二 </div>
		
		
	</div>
	
</div> 
<!--
	菜单 初始化都是隐藏的
-->
	<div id="mm" class="easyui-menu" style="width:120px;">
			<div data-options="name:'Close'">关闭当前窗口</div>
			<div data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
	</div>

<!--系统菜单-->
<div id="cad" style="width: 120px;">
		<div>菜单一</div>
		<div>菜单二</div>
		<div>菜单三</div>
		<div>菜单四</div>
		
		
	</div>
</body> 

 


</html>
